<template>
	<view 
		class="message-item"
		@tap="handleTap"
		@longpress="handleLongPress"
	>
		<view class="message-avatar">
			<image :src="message.avatar" class="avatar" />
			<view v-if="message.status === 'online'" class="online-status"></view>
		</view>
		
		<view class="message-content">
			<view class="message-header">
				<text class="sender-name">{{ message.sender }}</text>
				<text class="message-time">{{ formatTime(message.time) }}</text>
			</view>
			<view class="message-preview">
				<text :class="['preview-text', { unread: !message.read }]">
					{{ message.preview }}
				</text>
				<view v-if="!message.read" class="unread-dot"></view>
			</view>
		</view>

		<view class="message-actions">
			<view v-if="message.type === 'system'" class="system-tag">系统</view>
			<view v-if="!message.read" class="unread-count">{{ message.unreadCount || 1 }}</view>
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
	message: {
		type: Object,
		required: true
	}
})

const emits = defineEmits(['tap', 'longpress'])

// 格式化时间
const formatTime = (time) => {
	const now = new Date()
	const diff = now - time
	const minutes = Math.floor(diff / 60000)
	const hours = Math.floor(diff / 3600000)
	const days = Math.floor(diff / 86400000)
	
	if (minutes < 1) return '刚刚'
	if (minutes < 60) return `${minutes}分钟前`
	if (hours < 24) return `${hours}小时前`
	if (days < 7) return `${days}天前`
	
	return time.toLocaleDateString('zh-CN', {
		month: 'short',
		day: 'numeric'
	})
}

const handleTap = () => {
	emits('tap', props.message)
}

const handleLongPress = () => {
	emits('longpress', props.message)
}
</script>

<style scoped>
.message-item {
	display: flex;
	padding: 15px 20px;
	border-bottom: 1px solid #f0f0f0;
	align-items: flex-start;
	gap: 12px;
	transition: background-color 0.2s ease;
}

.message-item:active {
	background: #f8f9fa;
}

.message-item:last-child {
	border-bottom: none;
}

/* 头像区域 */
.message-avatar {
	position: relative;
	flex-shrink: 0;
}

.avatar {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: #f0f0f0;
}

.online-status {
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 12px;
	height: 12px;
	background: #52c41a;
	border: 2px solid white;
	border-radius: 50%;
}

/* 消息内容 */
.message-content {
	flex: 1;
	overflow: hidden;
}

.message-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
}

.sender-name {
	font-size: 16px;
	font-weight: 500;
	color: #333;
}

.message-time {
	font-size: 13px;
	color: #999;
}

.message-preview {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.preview-text {
	font-size: 14px;
	color: #666;
	line-height: 1.4;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.preview-text.unread {
	color: #333;
	font-weight: 500;
}

.unread-dot {
	width: 8px;
	height: 8px;
	background: #1890ff;
	border-radius: 50%;
	margin-left: 8px;
	flex-shrink: 0;
}

/* 消息操作 */
.message-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 5px;
}

.system-tag {
	background: #f0f0f0;
	color: #666;
	font-size: 11px;
	padding: 2px 6px;
	border-radius: 8px;
}

.unread-count {
	background: #ff4757;
	color: white;
	font-size: 12px;
	padding: 2px 6px;
	border-radius: 10px;
	min-width: 18px;
	text-align: center;
	line-height: 1.2;
}
</style>